<%-- 
    Document   : showcart
    Created on : Jul 9, 2011, 10:56:48 AM
    Author     : Admin
--%>

<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="java.io.PrintWriter"%>
<%@page import="common.Constant"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/style.css" />
    <!--[if IE 6]><link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/iecss.css" /><![endif]-->
    <script type="text/javascript" language="JavaScript">
        function changeNum(){
            var i = 1;
            var totalAmount = 0;
            var row = document.getElementById('txtNo').value;
            var discount = document.getElementById('discount').value;
            for(i; i <= row; i++){
                var ckNum = document.getElementById('txtNum'+i).value;
                if(ckNum != ''){
                    if(isNaN(ckNum)){
                        document.getElementById('txtNum' + i).value = "1";
                        alert("Number must be a integers!");
                        return;
                    }
                    ckNum = ckNum.replace("-","");
                    if((parseInt(ckNum) - 0) + "" != document.getElementById('txtNum' + i).value){
                        document.getElementById('txtNum' + i).value = "1";
                        alert("Number must be positive integers!");
                        return;
                    }
                    if(document.getElementById('txtNum' + i).value == ""){
                        document.getElementById('txtNum' + i).value = "1";
                    }
                    document.getElementById('txtAmount' + i).value = document.getElementById('txtNum' + i).value * document.getElementById('txtPrice' + i).value;
                }
                totalAmount+=parseInt(document.getElementById('txtAmount' + i).value);
            }
            document.getElementById('totalAmount1').value = totalAmount;
            document.getElementById('totalAmount').value = totalAmount - ((totalAmount*discount)/100);
        }

        function submitForm(){
            document.forms["showCart"].submit();
        }

        function checkoutForm(){
            document.getElementById("action").value = "checkout";
            submitForm();
        }

        function removeAllForm(){
            document.getElementById("action").value = "removeall";
            submitForm();
        }

        function confirmDeleteRow() {
            document.getElementById("action").value = 'remove';
            <%
                response.setContentType("text/html;charset=UTF-8");
                out.print("var msg='';\n");

                for(Integer i = 1; i <= Constant.NUM_ROWS ; i++) {
                    out.write("if(document.showCart.chkRow" + i.toString() +".checked == true){\n");
                    out.write("msg += ' " + i.toString() + " - '; } \n");
                }
                out.write("if(msg == '') {\n");
                out.write("alert('Chose delete row!');\n");
                out.write("} else {\n");
                out.write("if (confirm('Are you sure to delete ' + msg + '?')) \n submitForm(); \n");
                out.write("}\n");
            %>
	}

        function checkAll(){
            <%
                for(Integer i = 1; i <= Constant.NUM_ROWS ; i++) {
                    out.write("if(document.showCart.chkRow" + i.toString() +".checked == false){\n");
                    out.write("document.showCart.chkRow" + i.toString() +".checked = true}\n");
                    out.write("else{document.showCart.chkRow" + i.toString() +".checked = false}\n");
                }
            %>
        }
    </script>
    <title>Shopping Cart Page</title>
</head>
    <body onload="changeNum();">
	<div id="main_container">
		<!-- S HEAD CONTENT -->
			<jsp:include page="block/header.jsp" />
		<!-- E HEAD CONTENT -->

		<!-- S Top Menu -->
			<jsp:include page="block/top_menu.jsp" />
		<!-- E Top Menu -->



                <!-- S Left Menu -->
			<jsp:include page="block/left_menu.jsp" />
		<!-- E Left Menu -->

		<!-- S Body Content -->
                <c:set var="shopCard" value="${sessionScope.shoppingCard}" scope="session"/>
                <form id="showCart" name="showCart" action="ShoppingCardController" method="post" style="background: transparent">
                    <table cellpadding="0" cellspacing="0" border="0" style="background: transparent" align="center">
                        <c:if test="${empty shopCard}">
                            <tr>
                                <th colspan="5"><b class="error">Your shoppingcart empty! </b><br/></th>
                            </tr>
                        </c:if>
                        <tr>
                            <th colspan="5" align="center"><h1>Shopping Cart</h1><br/></th>
                        </tr>
                    </table>
                    <c:set var="integer" value="1"/>
                    <table cellpadding="0" cellspacing="0" border="2" style="background: transparent" align="center">
                        <c:if test="${not empty shopCard}">
                            <tr>
                                <th bgcolor= '#186fb2' ><div class = "div_txtintable1">
                                        <input type="checkbox" id="chkAll" name="chkAll" onclick="checkAll()" />
                                    </div></th>
                                <th bgcolor= '#186fb2' width="20px"><div class = "div_txtintable1">No.</div></th>
                                <th bgcolor= '#186fb2' ><div class = "div_txtintable1">Product Name</div></th>
                                <th bgcolor= '#186fb2' ><div class = "div_txtintable1">Price($)</div></th>
                                <th bgcolor= '#186fb2' ><div class = "div_txtintable1">Number</div></th>
                                <th bgcolor= '#186fb2' ><div class = "div_txtintable1">Amount</div></th>
                            </tr>
                        <c:forEach var="objShopCard" items="${shopCard}">
                            <tr <c:if test="${integer % 2 eq 0}"> style="background-color: silver" </c:if> >
                                <td><input type="checkbox" name="chkRow${integer}" style="background-color: transparent" /></td>
                                <td align="center">${integer}</td>
                                <td>
                                    <input type="text" id="txtProductName${integer}" name="txtProductName${integer}" value="${objShopCard.productName}" readonly style="background-color: transparent"/>
                                    <input type="hidden" id="txtProductID${integer}" name="txtProductID${integer}" value="${objShopCard.productID}" />
                                </td>
                                <td><input type="text" name="txtPrice${integer}" id="txtPrice${integer}" value="${objShopCard.price}" readonly style="background-color: transparent"></input></td>
                                <td><input type="text" name="txtNum${integer}" id="txtNum${integer}" value="${objShopCard.number}" onkeyup="changeNum();" style="background-color: transparent"></input></td>
                                <td><input type="text" name="txtAmount${integer}" id="txtAmount${integer}" value="${objShopCard.price * objShopCard.number}" readonly style="background-color: transparent"></input></td>
                            </tr>
                            <c:set var="integer" value="${integer+1}"/>
                        </c:forEach>
                        <input type="hidden" id="txtNo" name="txtNo" value="${integer-1}"/>
                        <tr style="background-color: teal; font-style: oblique">
                            <td></td>
                            <td colspan="4" style="background-color: inherit">Amount</td>
                            <td><input type="text" id="totalAmount1" name="totalAmount1" value="" readonly style="background-color: transparent" /> </td>
                        </tr>
                        <tr style="background-color: teal; font-style: oblique">
                            <td></td>
                            <td colspan="4" style="background-color: inherit">Discount</td>
                            <td><input type="text" id="discount" name="discount"
                                       <c:if test="${sessionScope.role eq 'Potential Customer'}">value="10"</c:if>
                                       <c:if test="${sessionScope.role ne 'Potential Customer'}">value="0"</c:if>
                                       readonly style="background-color: transparent" /> % </td>
                        </tr>
                        <tr style="background-color: teal; font-style: oblique">
                            <td></td>
                            <td colspan="4" style="background-color: inherit">Total Amount</td>
                            <td><input type="text" id="totalAmount" name="totalAmount" value="" readonly style="background-color: transparent" /> </td>
                        </tr>
                        </c:if>
                    </table>
                    <c:if test="${not empty shopCard}">
                    <table cellpadding="0" cellspacing="0" border="0" style="background: transparent" align="center">
                        <tr>
                            <th colspan="5"><br/>
                                <input type="hidden" name="action" id="action" value="" />
                                <a href="javascript: checkoutForm()" name="checkOut" id="checkOut" class="navCart">Check Out</a>
                                <a href="javascript: confirmDeleteRow()" name="remove" id="remove" class="navDel">Remove product</a>
                            </th>
                        </tr>
                    </table>
                    </c:if>
                </form>
		<!-- E Body Content -->
                <!-- S Footer -->
			<jsp:include page="block/footer.jsp" />
		<!-- E Footer -->
	</div>
</body>
</html>